<template>
  <div class="px-[40px] pt-[20px]">
    <CustomTitle title="报警概况"></CustomTitle>
    <div class="w-full h-[360px] bg-[#1B1B1B] mt-[10px] rounded-[10px] p-[20px]">
      <a-select v-model:value="time_type" style="width: 140px" @change="getDatas">
        <a-select-option :value="7">近一周数据</a-select-option>
        <a-select-option :value="1">今日数据</a-select-option>
        <a-select-option :value="30">近一月数据</a-select-option>
      </a-select>
      <div class="flex">
        <LineCharts width="1400" height="320" ref="lineChartsRef" />
        <!-- <PieCharts width="500" height="250" ref="chartsRef" /> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { apiGetWarningStatistic } from '@/http/api';
import * as echarts from 'echarts';
// const chartsRef = ref();
const lineChartsRef = ref();
const abnormal_count = ref(0);
const normal_count = ref(0);
const time_type = ref(1);
const datas = ref<{ time: string; abnormal_count: number; normal_count: number }[]>([]);
const getDatas = async () => {
  try {
    const res = await apiGetWarningStatistic(time_type.value);
    abnormal_count.value = res.data.reduce((pre, item) => {
      return pre + item.abnormal_count;
    }, 0);
    normal_count.value = res.data.reduce((pre, item) => {
      return pre + item.normal_count;
    }, 0);
    datas.value = res.data;
    // datas.value.push({ ...res.data[0], time: '2024-06-02' });
    // fillPieCharts();
    fillLineCharts();
  } catch (error) {}
};
const fillLineCharts = () => {
  const option: echarts.EChartsOption = lineChartsRef.value.getOptions();
  (option.series as any)![0].name = '数据异常';
  (option.series as any)![0].data = datas.value.map(item => item.abnormal_count);
  (option.xAxis as any)!.axisLine = {
    lineStyle: {
      color: '#fff',
    },
  };
  (option.legend as any) = {
    show: true,
    right: 0,
    data: ['数据异常'],
    textStyle: {
      color: 'white',
    },
    itemStyle: {
      color: '#F83253',
    },
  };

  (option.series as any)![0].areaStyle = {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: '#321D21',
      },
      {
        offset: 1,
        color: '#321D21',
      },
    ]),
  };
  (option.series as any)![0].lineStyle = {
    color: 'rgb(248, 50, 83)',
  };
  (option.series as any)![0].smooth = true;
  (option.xAxis as any)!.data = datas.value.map(item => item.time);
  // (option.title as any)!.text = '异常';
  lineChartsRef.value.setOptions(option);
};

// const fillPieCharts = () => {
//   const option: echarts.EChartsOption = chartsRef.value.getOptions();
//   (option.title as any) = {
//     show: true,
//     text: '设备报警',
//     textStyle: {
//       color: '#E6E6E6',
//     },
//     bottom: '0%',
//     left: '50%',
//   };
//   (option.legend as any) = { show: false };
//   (option.series as any)![0].radius = '70%';
//   // (option.series as any)![0].roseType = 'radius';
//   (option.series as any)![0].itemStyle = {
//     normal: {
//       color: function (colors: any) {
//         var colorList = ['#F83253', '#E6E6E6'];
//         return colorList[colors.dataIndex];
//       },
//     },
//   };
//   (option.series as any)![0].left = '20%';
//   (option.series as any)![0].label = {
//     show: true,
//     color: 'white',
//     formatter: '{d}% {b}\n 数量：{c}  ',
//   };
//   (option.series as any)![0].data = [
//     {
//       value: abnormal_count.value,
//       // name: `${((abnormal_count.value / (abnormal_count.value + normal_count.value)) * 100).toFixed(2)}% 空闲  数量：${abnormal_count.value}`,
//       name: `报警`,
//     },
//     {
//       value: normal_count.value,
//       // name: `${((normal_count.value / (abnormal_count.value + normal_count.value)) * 100).toFixed(2)}% 运行  数量：${normal_count.value}`,
//       name: `正常`,
//     },
//   ];
//   chartsRef.value.setOptions(option);
// };
onBeforeMount(() => {
  getDatas();
});
</script>
<style lang="scss" scoped></style>
